<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山羊的前端小窝</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: rgb(0, 0, 0);
        }
        .shell{
            width: 100%;
            height: 100%;
            background-color: #000;
            overflow: hidden;
        }
        .page{
            transform: translateX(-110%);
            position: absolute;
            width: 50%;
            height: 100%;
            transition: .5s;
            background-size: cover;
        }
        .button{
            display: block;
            width: 10%;
            color: #fff;
            font-size: 30px;
            border-bottom: #fff solid 4px;
            text-align: center;
            position: absolute;
            bottom: 10px;
            margin: 50px;
            left: calc(50% + (var(--i)*17%));
            z-index: 999;
            transition: .3s;
        }
        .page_content{
            box-sizing: border-box;
            height: 100%;
            padding: 50px;
            color: #FFF;
            position: absolute;
            left: 100%;
            display: none;
            animation-name: fade;
            animation-duration: .7s;
            animation-iteration-count: 1;
            opacity: 1;
        }
        @keyframes fade{
            0%{
                opacity: 0;
            }
            50%{
                opacity: 0;
                transform: translateY(-50px);
            }
            100%{
                opacity: 1;
                transform: translateY(0px);
            }
        }
        input{
            display: none;
        }
        input:checked+.page{
            transform: translateX(0px);
            transition: .4s;
        }
        input:checked+.page .page_content{
            width: 100%;
            display: block;
        }
        .page:nth-child(3){
            background-image: url('./1.jpeg');
        }
        .page:nth-child(3) .page_content{
            background-color: rgb(185,130,130);
        }

        .page:nth-child(6){
            background-image: url('./2.jpeg');
        }
        .page:nth-child(6) .page_content{
            background-color: rgb(173,170,226);
        }

        .page:nth-child(9){
            background-image: url('./3.jpeg');
        }
        .page:nth-child(9) .page_content{
            background-color: rgb(236,180,110);
        }
        .page h1{
            font-size: 70px;
        }
        .page p{
            font-size: 30px;
            padding: 10px;
            background-color: rgba(0, 0, 0, .3);
            border-radius: 10px;
            margin: 30px 0;
        }
        .page span{
            font-size: 26px;
            letter-spacing: 2px;
            color: rgb(56, 56, 56);
        }
        label:hover{
            cursor: pointer;
            border-bottom: solid 4px rgb(35, 35, 35);
        }
    </style>
</head>

<body>
    <div class="shell">
        <label for="button1" class="button" style="--i:0">Grace</label>
        <input type="radio" id="button1" name="page" checked>
        <div class="page">
            <div class="page_content">
                <h1>Grace</h1>
                <p>Fashion women wear clothes, not clothes.</p>
                <span>
                    Designers are reimagining soignée staples for spring and summer─skirt suits, twin sets,
                    below-the-knee dresses, kitten heels and frame bags─that appear anything but moth-eaten. in fact,
                    fashion's neoconservative coup d'état feels deliciously defiant, given the excessively revealing
                    styles pop culture celebrates. a quick flip through any supermarket tabloid yields an onslaught of
                    oversexed stars and their indelicate fashion choices.
                </span>
            </div>
        </div>


        <label for="button2" class="button" style="--i:1">Trend</label>
        <input type="radio" id="button2" name="page">
        <div class="page">
            <div class="page_content">
                <h1>Trend</h1>
                <p>Fashion is like a colorful screen. In a flash, it becomes its color.</p>
                <span>Is conservative the new radical? the fashion world certainly seems to think so. this season,
                    designers filled their runways with restrained silhouettes that echo the graceful,
                    showing-less-is-more aesthetic of generations past.
                </span>
            </div>
        </div>


        <label for="button3" class="button" style="--i:2">Design</label>
        <input type="radio" id="button3" name="page">
        <div class="page">
            <div class="page_content">
                <h1>Design</h1>
                <p>I need to be different and irreplaceable.</p>
                <span>
                    Designers appreciate it when attendees wear their brand to their show. most design houses will even
                    ensure that the celebrities are “appropriately” dressed in designer wear once they agree to attend.
                </span>
            </div>
        </div>
    </div>
</body>

</html>